{% extends 'layout/manage.html' %}
{% load issues %}
{% block css %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/css/editormd.min.css' %}">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <style>
        .panel-body > .col-sm-3 {
            padding-right: 10px;
            padding-left: 10px;
        }

        .panel-body > .col-sm-9 {
            padding-right: 10px;
            padding-left: 10px;
        }

        .issues-list .number {
            width: 100px;
            text-align: right;
        }

        .issues-list .number a {
            font-weight: 500;
            padding: 0 10px;
        }

        .issues-list .issue .tags {
            padding: 10px 0;
        }

        .issues-list .issue .tags span {
            margin-right: 20px;
            display: inline-block;
            font-size: 12px;
        }

        .issues-list .issue .tags .type {
            color: white;
            padding: 1px 5px;
            border-radius: 5px;
        }

        .pd-0 {
            padding: 0 !important;
        }

        .comment-area .item {
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-left: 5px;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .comment-area .right-info {
            padding-left: 35px;
        }

        .comment-area .right-info .desc .msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }

        .editormd-fullscreen {
            z-index: 1001;
        }

        .comment-text {
            margin: 20px;
        }

    </style>

{% endblock %}
{% block content %}
    <div class="panel-body">
    <div class="col-sm-7 title-list">

        <div class="panel panel-primary">
            <div class="panel-heading">筛 选</div>
            <div class="panel-body">
                <div class="modal-body" style="padding-right: 30px">
                    <form class="form-horizontal" id="addForm">
                        {% csrf_token %}
                        {#                        {% for i in form %}#}
                        {#                        <div class="form-group">#}
                        {#                            <label for="{{ i.id_for_label }}" class="col-sm-1 control-label">{{ i.label }}</label>#}
                        {#                            <div class="col-sm-10">#}
                        {#                                {{ i }}#}
                        {#                            </div>#}
                        {#                            <span class="errors">{{ i.errors.0 }}</span>#}
                        {#                        </div>#}
                        {#                        {% endfor %}#}
                        <div class="form-group">
                            <label for="{{ form.the_title.id_for_label }}" class="col-sm-1 control-label">{{ form.the_title.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    {{ form.the_title }}
                                </div>
                                <div><span class="errors">{{ form.the_title.errors.0 }}</span></div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="{{ form.the_content.id_for_label }}" class="col-sm-1 control-label">{{ form.the_content.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div id="editor">
                                        {{ form.the_content }}
                                    </div>
                                </div>
                                <div><span class="errors">{{ form.the_content.errors.0 }}</span></div>
                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.problem_type.id_for_label }}" class="col-sm-4 control-label">{{ form.problem_type.label }}</label>
                                <div class="col-sm-5">


                                    {{ form.problem_type }}


                                    <div><span class="errors">{{ form.problem_type.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.modular.id_for_label }}" class="col-sm-4 control-label">{{ form.modular.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.modular }}
                                    </div>

                                    <div><span class="errors">{{ form.modular.errors.0 }}</span></div>
                                </div>
                            </div>

                        </div>

                        <div class="form-group ">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.statused.id_for_label }}" class="col-sm-4 control-label">{{ form.statused.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.statused }}
                                    </div>

                                    <div><span class="errors">{{ form.statused.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.assign_user_information.id_for_label }}" class="col-sm-4 control-label">{{ form.assign_user_information.label }}</label>
                                <div class="col-sm-5">


                                    {{ form.assign_user_information }}

                                    <div><span class="errors">{{ form.assign_user_information.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>
                        <div class="form-group ">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.follow_user_information.id_for_label }}" class="col-sm-4 control-label">{{ form.follow_user_information.label }}</label>
                                <div class="col-sm-5">


                                    {{ form.follow_user_information }}


                                    <div><span class="errors">{{ form.follow_user_information.errors.0 }}</span></div>
                                </div>
                            </div>
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.start_time.id_for_label }}" class="col-sm-4 control-label">{{ form.start_time.label }}</label>
                                <div class="col-sm-5">

                                    <div class="input-group">
                                            <span class="input-group-addon" id="'sizing-addon1'">
                                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                            </span>
                                        {{ form.start_time }}
                                    </div>

                                    <div><span class="errors">{{ form.start_time.errors.0 }}</span></div>
                                </div>
                            </div>


                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.end_time.id_for_label }}" class="col-sm-4 control-label">{{ form.end_time.label }}</label>
                                <div class="col-sm-5">

                                    <div class="input-group">
                                            <span class="input-group-addon" id="'sizing-addon2'">
                                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                            </span>
                                        {{ form.end_time }}
                                    </div>

                                    <div><span class="errors">{{ form.end_time.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>
                        <div class="form-group  clearfix">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.pattern.id_for_label }}" class="col-sm-4 control-label">{{ form.pattern.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.pattern }}
                                    </div>

                                    <div><span class="errors">{{ form.pattern.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.parent_problem.id_for_label }}" class="col-sm-4 control-label">{{ form.parent_problem.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.parent_problem }}
                                    </div>

                                    <div><span class="errors">{{ form.parent_problem.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-5 content">

        <div class="panel panel-primary">
            <div class="panel-heading">问 题</div>

            <nav aria-label="" class="comment-area" style="overflow-y:auto; height: 520px">


            </nav>
            <div class="comment-text" id="commentText">

                <div class="form-group">
                            <textarea id="content" rows="6" class="form-control"
                                      placeholder="请输入要回复的内容"></textarea>
                    <span class="error-msg"></span>
                </div>

                <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交">
                <div class="reply-user hide" id="replyUser" parent-id="0">
                    回复 <span></span>
                    <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>
                </div>
            </div>
        </div>
    </div>

    {% csrf_token %}

    <div class="hide" id="recordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre></pre>
                <div class="desc">
                    <div class="msg">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>

                    <a href="#commentText" class="reply">
                        <i class="fa fa-commenting-o" aria-hidden="true"></i> 回复
                    </a>

                </div>
            </div>
            <div class="child">

            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static 'plugin/editor.md-master/editormd.min.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    {#    var WIKI_DETAIL_URL = '{% url 'wiki' project_id=request.obj.0.0 %}';#}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/i18n/defaults-zh_CN.min.js"></script>
    <script>
        POST_ISSUES = '{% url 'issues' request.obj.0.0 %}';
        $(function () {
            initIssuesRecord();
            initEdtorMd();
            initDatePicker();

            bindReply();
            bindCancelReplyUser();
            bindSummit();
            fasong();

        });

        // 初始化edotor
        function initEdtorMd() {
            editormd('editor', {
                placeholder: "请输入内容",
                height: 300,
                path: '{% static 'plugin/editor.md-master/lib/' %}',
                imageUpload: true,
                imageFormats: ['jpg', 'png', 'gif', 'jpeg'],
                imageUploadURL: '{% url 'wiki_upload' project_id=request.obj.0.0%}',
                onload: function () {
                    this.previewing()
                },
                toolbarIcons: function () {
                    return ['bold', 'hr', 'del', 'italic', 'quote', '|', 'image', 'preview', 'watch', 'fullscreen']
                },
                toolbarCustomIcons: {
                    save: "<input type='button' value='保存' class='btn btn-success btn-sm' onclick='saceDesc();'/>"
                }
            })
        }

        // 初始化事件显示 并且设置时间显示
        function initDatePicker() {
            $('#id_start_time,#id_end_time').datepicker({
                format: 'yyyy-mm-dd 00:00:00',
                startData: '0',
                language: 'zh-CN',
                autoclose: true
            })
        }

        function initIssuesRecord() {
            $.ajax({
                url: '{% url 'issues_record' project_id=request.obj.0.0  issues_id=issues_id %}',
                type: 'get',
                dataType: "JSON",
                {#data: '1',#}
                success: function (res) {
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            createRecordNode(item);
                        })
                    } else {
                        console.log('错误')
                    }
                }
            })
        }

        function createRecordNode(nodeDict) {
            var $item = $("#recordTemplate").find('.item').clone();
            $item.find('.left-avatar').html(nodeDict.user_name[0]);
            $item.find('.left-avatar').attr('date_name', nodeDict.user_name);
            $item.find('pre').html(nodeDict.content_problem);
            $item.find('.user').html(nodeDict.user_name);
            $item.find('.type').html(nodeDict.replp_type);
            $item.find('.date').html('2000-11-11');
            $item.attr({id: nodeDict.id, username: nodeDict.user_name});

            if (nodeDict.father_reply != 0) {
                // 挂在谁下
                $('#' + nodeDict.father_reply).children('.child').append($item);
            } else {
                // 根下
                $('.comment-area').append($item);
            }
        }

        // 绑定回复信息
        function bindReply() {
            $('.comment-area').on('click', '.reply', function () {
                var $item = $(this).parent().parent().parent();
                var id = $item.attr('id');
                var username = $item.attr('username');
                $('#replyUser').removeClass('hide').attr('parent-id', id).children('span').text(username);
            })
        }

        // 取消回复信息
        function bindCancelReplyUser() {

            $('#replyUser').click(function () {
                $(this).addClass('hide').removeAttr('parent-id').children('span').text("");
            })
        }

        // 给提交回复信息绑定一个事件
        function bindSummit() {
            $('#btnSubmit').click(function () {
                var content = $('#content').val();
                var father_id = $('#replyUser').attr('parent-id');
                $.ajax({
                    url: '{% url 'issues_record' request.obj.0.0 issues_id %}',
                    type: 'post',
                    dataType: 'JSON',
                    data: {
                        csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
                        'content': content,
                        'father_id': father_id
                    },
                    success: function (ret) {
                        if (ret.status) {
                            $('.comment-area').html('');
                            $('#content').val('');
                            $.each(ret.data, function (index, item) {
                                createRecordNode(item);
                            })
                        } else {
                            console.log('错误')
                        }

                    }
                })
            })
        }
        function fasong() {
            $('#addForm').change(function () {
                $.ajax({
                url:'{% url 'issues_update' request.obj.0.0 issues_id %}',
                type:'post',
                dataType:'JSON',
                data: $('#addForm').serialize(),
                success:function (ret) {
                    console.log(ret);
                    $('.comment-area').html('');
                    initIssuesRecord();
                }
            })
            })
        }
        //console.log($('#addForm').serialize())
    </script>

{% endblock %}
